<template>
  <div class="song-audio">
    <audio id="player" :src="url" controls="controls" preload="true" @canplay="startPlay" @ended="ended"></audio>
  </div>
</template>
<script>
  import {mapGetters} from 'vuex'
  export default {
    name: 'song-audio',
    computed:{
      ...mapGetters([
        'id',
        'url',
        'isPlay'
      ])
    },
    watch: {
      //监听播放还是暂停
      isPlay: function () {
        this.togglePlay();
      }
    },
    methods: {
      //获取链接后准备播放
      startPlay(){
        let player = document.querySelector('#player');
        //开始播放
        player.play();
      },
      //播放完成之后触发
      ended(){
        this.isPlay = false
      },
      //开始 暂停
      togglePlay(){
        let player = document.querySelector('#player');
        if(this.isPlay){
          player.play();
        }else{
          player.pause();
        }
      }
    }
  }
</script>
<style>
  .song-audio{
    display: none;
  }
</style>
